<template>
  <div class="bookcar-management">
    <!-- 搜索条件 -->
    <el-card class="search-card">
      <el-form
        :model="searchForm"
        label-width="100px"
        @submit.prevent="searchBookcars"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="车辆ID">
              <el-input v-model="searchForm.cdid" placeholder="请输入车辆ID" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约状态">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择预约状态"
                style="width: 100%"
              >
                <el-option label="全部" :value="null"></el-option>
                <el-option label="待确认" :value="0"></el-option>
                <el-option label="已确认" :value="1"></el-option>
                <el-option label="已完成" :value="2"></el-option>
                <el-option label="已取消" :value="3"></el-option>
                <el-option label="已超时" :value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="searchBookcars">搜索</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 预约列表 -->
    <el-card class="bookcars-card">
      <div class="bookcar-list">
        <el-row :gutter="20">
          <el-col
            v-for="bookcar in bookcars"
            :key="bookcar.bcid"
            :span="24"
            class="bookcar-item"
          >
            <el-card class="bookcar-card">
              <el-row :gutter="20">
                <!-- 左侧车辆信息 -->
                <el-col :span="12">
                  <div class="car-info">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div class="car-details">
                          <h3>{{ bookcar.cname }}</h3>
                          <p>
                            <span class="label">预约ID:</span>
                            {{ bookcar.bcid }}
                          </p>
                          <p>
                            <span class="label">用户ID:</span>
                            {{ bookcar.userid }}
                          </p>
                          <p>
                            <span class="label">车辆ID:</span>
                            {{ bookcar.cdid }}
                          </p>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="carousel-container">
                          <el-carousel height="100px" motion-blur>
                            <el-carousel-item
                              v-for="item in carimg"
                              :key="item"
                            >
                              <img :src="item" class="banner-image" />
                            </el-carousel-item>
                          </el-carousel>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>

                <!-- 右侧预约信息 -->
                <el-col :span="10">
                  <div class="bookcar-details">
                    <el-descriptions :column="1" size="small" border>
                      <el-descriptions-item label="开始时间">
                        {{ formatDate(bookcar.starttime) }}
                      </el-descriptions-item>
                      <el-descriptions-item label="结束时间">
                        {{ formatDate(bookcar.endtime) }}
                      </el-descriptions-item>
                      <el-descriptions-item label="预约状态">
                        <div class="status-container">
                          <el-tag
                            :type="getStatusType(bookcar.status)"
                            style="margin-right: 10px"
                          >
                            {{ getStatusText(bookcar.status) }}
                          </el-tag>
                          <div
                            class="status-actions"
                            v-if="bookcar.status === 0"
                          >
                            <el-button
                              type="primary"
                              size="small"
                              @click="updateBookcarStatus(bookcar, 1)"
                            >
                              确认
                            </el-button>
                            <el-button
                              type="danger"
                              size="small"
                              @click="updateBookcarStatus(bookcar, 3)"
                            >
                              取消
                            </el-button>
                          </div>
                        </div>
                      </el-descriptions-item>
                      <el-descriptions-item label="备注">
                        {{ bookcar.remark || "无" }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-col>

                <!-- 操作列 -->
                <el-col :span="2">
                  <div class="bookcar-actions">
                    <el-button
                      type="danger"
                      :icon="Delete"
                      circle
                      @click="deleteBookcar(bookcar)"
                      title="删除预约"
                    />
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import api from "@/util/service";
import { pa } from "element-plus/es/locales.mjs";
import { useLoginStore } from "@/stores/userStores";

const userStore = useLoginStore();
// 搜索表单
const searchForm = reactive({
  userid: userStore.getId,
  cdid: null,
  status: null,
});
const carimg = ref([
  "http://localhost:5173/src/assets/carImages/0.JPG",
  "http://localhost:5173/src/assets/carImages/1.JPG",
  "http://localhost:5173/src/assets/carImages/2.JPG",
  "http://localhost:5173/src/assets/carImages/3.JPG",
]);
// 预约数据
const bookcars = ref([]);

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "待确认",
    1: "已确认",
    2: "已完成",
    3: "已取消",
    4: "已超时",
  };
  return statusMap[status] || "未知状态";
};

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: "", // 待确认 - 默认灰色
    1: "primary", // 已确认 - 蓝色
    2: "success", // 已完成 - 绿色
    3: "info", // 已取消 - 灰色
    4: "danger", // 已超时 - 红色
  };
  return typeMap[status] || "info";
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  // 将ISO 8601格式转换为本地时间显示
  const date = new Date(dateStr);
  return date
    .toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
    .replace(/\//g, "-");
};

// 获取预约数据
const fetchBookcars = async (
  params = {
    pageNum: 1,
    pageSize: 10,
    userid: userStore.getId,
  }
) => {
  try {
    const response = await api.post("/tbookcar/selectBookcar", params);
    if (response.code === 200) {
      bookcars.value = response.data;
    } else {
      ElMessage.error(response.message || "获取预约数据失败");
    }
  } catch (error) {
    ElMessage.error("获取预约数据失败");
    console.error(error);
  }
};

// 搜索预约
const searchBookcars = () => {
  const params = {
    userid: searchForm.userid ? parseInt(searchForm.userid) : null,
    cdid: searchForm.cdid ? parseInt(searchForm.cdid) : null,
    status: searchForm.status,
  };
  fetchBookcars(params);
};

// 重置搜索
const resetSearch = () => {
  searchForm.userid = null;
  searchForm.cdid = null;
  searchForm.status = null;
  fetchBookcars();
};

// 删除预约
const deleteBookcar = (bookcar) => {
  ElMessageBox.confirm(`确认删除预约 ${bookcar.bcid} 吗？`, "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        // 注意：根据您的后端接口，可能需要添加删除预约的接口
        // 这里假设您会添加一个 /tbookcar/deleteBookcar 接口
        const params = {
          bcid: bookcar.bcid,
        };

        const response = await api.post("/tbookcar/deleteBookcar", params);
        if (response.code === 200) {
          ElMessage.success("删除成功");
          fetchBookcars();
        } else {
          ElMessage.error(response.message || "删除失败");
        }
      } catch (error) {
        ElMessage.error("删除失败");
        console.error(error);
      }
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 更新预约状态
const updateBookcarStatus = async (bookcar, status) => {
  try {
    const params = {
      userid: bookcar.userid,
      bcid: bookcar.bcid,
      status: status,
    };

    const response = await api.post("/tbookcar/updateBookcar", params);
    if (response.code === 200) {
      ElMessage.success("状态更新成功");
      // 更新成功后重新获取数据
      fetchBookcars();
    } else {
      ElMessage.error(response.message || "状态更新失败");
    }
  } catch (error) {
    ElMessage.error("状态更新失败");
    console.error(error);
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchBookcars();
});
</script>

<style scoped>
.bookcar-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bookcars-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bookcar-item {
  margin-bottom: 20px;
}

.bookcar-card {
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
}

.bookcar-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.car-info {
  height: 100%;
  display: flex;
  align-items: center;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #ffffff;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}
.car-details h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 18px;
}

.car-details p {
  margin: 8px 0;
  font-size: 14px;
  color: #606266;
}

.label {
  font-weight: bold;
  color: #909399;
  margin-right: 5px;
}

.bookcar-details {
  height: 100%;
  display: flex;
  align-items: center;
}

.bookcar-actions {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-descriptions__body) {
  background-color: #fafafa;
}

@media (max-width: 768px) {
  .bookcar-card {
    margin-bottom: 15px;
  }

  .car-details h3 {
    font-size: 16px;
  }

  .car-details p {
    font-size: 12px;
  }
}
.carousel-container {
  width: 200px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-container {
  display: flex;
  align-items: center;
}

.status-actions {
  display: flex;
  gap: 5px;
}
</style>
